<template>
  <div class="app-container">
    <el-row :gutter="2">
      <el-col :span="18">
        <el-form :model="form" ref="form" size="small"  label-width="68px">
          <el-row :gutter="2">
            <el-col :span="24">
              <el-form-item label="产品型号" prop="typeNo" style="margin-bottom: 8px;">
                <el-input v-model="form.typeNo"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="2">
            <el-col :span="24">
              <el-form-item label="托盘编号" prop="wpcId"  style="margin-bottom: 8px;">
                <el-input v-model="form.wpcId"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="2">
            <el-col :span="24">
              <el-form-item label="产品信息" prop="partIdentifier"  style="margin-bottom: 8px;">
                <el-input v-model="form.partIdentifier"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <div class="datetime-container" :span="6">
        <div class="date">{{ currentDate }}</div>
        <div class="time">{{ currentTime }}</div>
      </div>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="10">
        <el-card>
          <div>
            <img :src="stationImage" :alt="stationCode" style="width: 600px; height: auto;" />
          </div>
        </el-card>
        <el-card>
          <div slot="header">
            <span style="font-weight: bold; font-size: 20px;">物料信息</span>
          </div>

          <div>
            <!-- 增加 row 的 border 样式 -->
            <!-- 终拧紧信息 -->
            <el-row :gutter="10" style="margin-bottom: 0px; border: 1px solid #ebeef5; padding: 4px;">
              <el-col style="width: 20%; border-right: 1px solid #ebeef5;">名称</el-col>
              <el-col style="width: 30%; border-right: 1px solid #ebeef5;">包装码</el-col>
              <el-col style="width: 20%; border-right: 1px solid #ebeef5;">物料号</el-col>
              <el-col style="width: 20%; border-right: 1px solid #ebeef5;">批次号</el-col>
              <el-col style="width: 10%; border-right: 1px solid #ebeef5;">数量</el-col>
            </el-row>
            <el-row
              v-for="(item, index) in ordList"
              :key="index"
              :gutter="10"
              class="row-bordered"
            >
              <el-col style="width: 20%; border-right: 1px solid #ebeef5;">{{ item.name }}</el-col>
              <el-col style="width: 30%; border-right: 1px solid #ebeef5;">{{ item.ordId }}</el-col>
              <el-col style="width: 20%; border-right: 1px solid #ebeef5;">{{ item.materialNo }}</el-col>
              <el-col style="width: 20%; border-right: 1px solid #ebeef5;">{{ item.batchNo }}</el-col>
              <el-col style="width: 10%; border-right: 1px solid #ebeef5;">{{ item.quantity }}</el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-row :gutter="2">
          <el-col :span="24">
            <el-card v-if="isCardVisible(stationCode)">
              <div slot="header">
                <span style="font-weight: bold; font-size: 20px;">生产状态</span>
              </div>
              <div>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">{{ getCameraTitle(1) }}</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult01 === 1 ? 'status-light-green' : cameraResult01 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult01 === 1 ? 'status-ok' : cameraResult01 === 2 ? 'status-ng' : ''">
                      {{ cameraResult01 === 1 ? 'OK' : cameraResult01 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" v-if="showCamera2" class="info-row">
                  <el-col :span="12">{{ getCameraTitle(2) }}</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult02 === 1 ? 'status-light-green' : cameraResult02 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult02 === 1 ? 'status-ok' : cameraResult02 === 2 ? 'status-ng' : ''">
                      {{ cameraResult02 === 1 ? 'OK' : cameraResult02 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" v-if="showCamera3" class="info-row">
                  <el-col :span="12">{{ getCameraTitle(3) }}</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult03 === 1 ? 'status-light-green' : cameraResult03 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult03 === 1 ? 'status-ok' : cameraResult03 === 2 ? 'status-ng' : ''">
                      {{ cameraResult03 === 1 ? 'OK' : cameraResult03 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <el-card v-if="isCardVisibleOnly27(stationCode)">
              <div slot="header">
                <span style="font-weight: bold; font-size: 20px;">相机拍照结果</span>
              </div>
              <div>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">PCB板锁紧螺丝（IGBT）相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult01 === 1 ? 'status-light-green' : cameraResult01 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult01 === 1 ? 'status-ok' : cameraResult01 === 2 ? 'status-ng' : ''">
                      {{ cameraResult01 === 1 ? 'OK' : cameraResult01 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">IGBT锁紧螺丝相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult02 === 1 ? 'status-light-green' : cameraResult02 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult02 === 1 ? 'status-ok' : cameraResult02 === 2 ? 'status-ng' : ''">
                      {{ cameraResult02 === 1 ? 'OK' : cameraResult02 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">PCB板锁紧螺丝（Hous）相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult03 === 1 ? 'status-light-green' : cameraResult03 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult03 === 1 ? 'status-ok' : cameraResult03 === 2 ? 'status-ng' : ''">
                      {{ cameraResult03 === 1 ? 'OK' : cameraResult03 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">薄膜电容螺丝相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult04 === 1 ? 'status-light-green' : cameraResult04 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult04 === 1 ? 'status-ok' : cameraResult04 === 2 ? 'status-ng' : ''">
                      {{ cameraResult04 === 1 ? 'OK' : cameraResult04 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">三相铜排锁紧螺丝相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult05 === 1 ? 'status-light-green' : cameraResult05 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult05 === 1 ? 'status-ok' : cameraResult05 === 2 ? 'status-ng' : ''">
                      {{ cameraResult05 === 1 ? 'OK' : cameraResult05 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">连接器螺丝相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult06 === 1 ? 'status-light-green' : cameraResult06 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult06 === 1 ? 'status-ok' : cameraResult06 === 2 ? 'status-ng' : ''">
                      {{ cameraResult06 === 1 ? 'OK' : cameraResult06 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">三相铜排相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult07 === 1 ? 'status-light-green' : cameraResult07 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult07 === 1 ? 'status-ok' : cameraResult07 === 2 ? 'status-ng' : ''">
                      {{ cameraResult07 === 1 ? 'OK' : cameraResult07 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">薄膜电容相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult08 === 1 ? 'status-light-green' : cameraResult08 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult08 === 1 ? 'status-ok' : cameraResult08 === 2 ? 'status-ng' : ''">
                      {{ cameraResult08 === 1 ? 'OK' : cameraResult08 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">滤波器相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult09 === 1 ? 'status-light-green' : cameraResult09 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult09 === 1 ? 'status-ok' : cameraResult09 === 2 ? 'status-ng' : ''">
                      {{ cameraResult09 === 1 ? 'OK' : cameraResult09 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">连接器相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult10 === 1 ? 'status-light-green' : cameraResult10 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult10 === 1 ? 'status-ok' : cameraResult10 === 2 ? 'status-ng' : ''">
                      {{ cameraResult10 === 1 ? 'OK' : cameraResult10 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">线束插座相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult11 === 1 ? 'status-light-green' : cameraResult11 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult11 === 1 ? 'status-ok' : cameraResult11 === 2 ? 'status-ng' : ''">
                      {{ cameraResult11 === 1 ? 'OK' : cameraResult11 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="info-row">
                  <el-col :span="12">PCB板相机拍照结果</el-col>
                  <el-col :span="12">
                    <span :class="cameraResult12 === 1 ? 'status-light-green' : cameraResult12 === 2 ? 'status-light-red' : ''"></span>
                    <span :class="cameraResult12 === 1 ? 'status-ok' : cameraResult12 === 2 ? 'status-ng' : ''">
                      {{ cameraResult12 === 1 ? 'OK' : cameraResult12 === 2 ? 'NG' : '' }}
                    </span>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-card class="box-card" id="preTighteningCard" v-if="isPreVisible(stationCode)">
            <div slot="header">
              <span style="font-weight: bold; font-size: 20px;">预拧紧信息</span>
            </div>
            <div>
              <!-- 增加 row 的 border 样式 -->
              <!-- 预拧紧信息 -->
              <el-row :gutter="10" style="margin-bottom: 0px; border: 1px solid #ebeef5; padding: 4px;">
                <el-col style="width: 7%; border-right: 1px solid #ebeef5;">螺丝号</el-col>
                <el-col style="width: 7%; border-right: 1px solid #ebeef5;">程序号</el-col>
                <el-col style="width: 8%; border-right: 1px solid #ebeef5;">结果状态</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">扭矩最小值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">扭矩实际值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">扭矩最大值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">角度最小值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">角度实际值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">角度最大值</el-col>
              </el-row>
              <el-row
                v-for="(item, index) in preTighteningData"
                :key="index"
                :gutter="10"
                class="row-bordered"
                :class="{ 'bg-success': item.resultState === 1, 'bg-danger': item.resultState === 2 }"
              >
                <el-col style="width: 7%; border-right: 1px solid #ebeef5;">{{ item.screwNumber }}</el-col>
                <el-col style="width: 7%; border-right: 1px solid #ebeef5;">{{ item.programNumber }}</el-col>
                <el-col style="width: 8%; border-right: 1px solid #ebeef5;">{{ item.resultState }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.torqueMin }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.torqueActual }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.torqueMax }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.angleMin }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.angleActual }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.angleMax }}</el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card" id="tighteningCard" v-if="!isPreVisible(stationCode)">
            <div slot="header">
              <span style="font-weight: bold; font-size: 20px;">终拧紧信息</span>
            </div>
            <div>
              <!-- 增加 row 的 border 样式 -->
              <!-- 终拧紧信息 -->
              <el-row :gutter="10" style="margin-bottom: 0px; border: 1px solid #ebeef5; padding: 4px;">
                <el-col style="width: 7%; border-right: 1px solid #ebeef5;">螺丝号</el-col>
                <el-col style="width: 7%; border-right: 1px solid #ebeef5;">程序号</el-col>
                <el-col style="width: 8%; border-right: 1px solid #ebeef5;">结果状态</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">扭矩最小值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">扭矩实际值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">扭矩最大值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">角度最小值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">角度实际值</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">角度最大值</el-col>
              </el-row>
              <el-row
                v-for="(item, index) in finalTighteningData"
                :key="index"
                :gutter="10"
                class="row-bordered"
                :class="{ 'bg-success': item.resultState === 1, 'bg-danger': item.resultState === 2 }"
              >
                <el-col style="width: 7%; border-right: 1px solid #ebeef5;">{{ item.screwNumber }}</el-col>
                <el-col style="width: 7%; border-right: 1px solid #ebeef5;">{{ item.programNumber }}</el-col>
                <el-col style="width: 8%; border-right: 1px solid #ebeef5;">{{ item.resultState }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.torqueMin }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.torqueActual }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.torqueMax }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.angleMin }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.angleActual }}</el-col>
                <el-col style="width: 13%; border-right: 1px solid #ebeef5;">{{ item.angleMax }}</el-col>
              </el-row>
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="imageDialogVisible" title="相机结果图片">
      <img :src="imageUrl" alt="相机抓拍图片" style="width: 100%; height: auto;" />
    </el-dialog>
    <el-row>
      <el-card class="box-card">
        <div style="font-weight: bold; font-size: 18px;">
          工作提示：Step{{operateDesc}}
        </div>
      </el-card>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <el-row :gutter="20" style="font-weight: bold; font-size: 18px;">
          <el-col :span="6" class="status-item-col">
            <div class="status-item">
              <span class="status-text">PLC连接状态</span>
              <span :class="plcConnected ? 'status-light-green' : 'status-light-red'"></span>
            </div>
          </el-col>
          <el-col :span="6" class="status-item-col">
            <div class="status-item">
              <span class="status-text">设备模式</span>
              <span :class="operationMode === 1 ? 'status-light-yellow' : operationMode === 2 ? 'status-light-blue' : operationMode === 4 ? 'status-light-green' : 'status-light-red'"></span>
              <span class="mode-text">
                {{ operationMode === 1 ? '手动' : operationMode === 2 ? '自动' : operationMode === 4 ? '自动运行' : '未知' }}
              </span>
            </div>
          </el-col>
          <el-col :span="6" class="status-item-col">
            <div class="status-item">
              <span class="status-text">设备原点</span>
              <span :class="inHomePos === 3 ? 'status-light-green' : inHomePos === 0 ? 'status-light-yellow' : 'status-light-red'"></span>
              <span class="mode-text">
                {{ inHomePos === 3 ? '正常' : inHomePos === 0 ? '不正常' : '未知' }}
              </span>
            </div>
          </el-col>
          <el-col :span="6" class="status-item-col">
            <div class="status-item">
              <span class="status-text">设备状态</span>
              <span :class="alarm === 0 ? 'status-light-green' : alarm === 1 ? 'status-light-red' : alarm === 2 ? 'status-light-yellow' : 'status-light-red'"></span>
              <span class="mode-text">
                {{ alarm === 0 ? '正常' : alarm === 1 ? '报警' : alarm === 2 ? '警告' : '未知' }}
              </span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import {listAllNode} from "@/api/order/node";

export default {
  data() {
    return {
      nodes: [], // 存储所有检测节点数据
      url: "ws://", // WebSocket基础URL
      stationCode: "",
      typeNo: "",//产品型号
      partIdentifier: "",//产品零件号
      operationMode: 4,//设备操作模式 =1 手动(黄色) =2 自动(蓝色) =4 自动运行(绿色)
      inHomePos: 3,//设备在原点 =3 正常(绿色) =0 不正常(黄色)
      alarm: 0,//设备报警 0正常(绿色) 1报警(红色) 2 警告(黄色)
      wpcId: "",//托盘编码

      operateCode: null,
      operateDesc: "",
      ordList: [],//物料信息列表
      flag: "",
      ws: null,
      preTighteningData: [],  // 预拧紧数据
      finalTighteningData: [], // 终拧紧数据
      cameraResult01:null,//相机1拍照结果
      cameraResult02:null,//相机2拍照结果
      cameraResult03:null,//相机3拍照结果
      screwNumber: 0, // 螺丝号
      imageDialogVisible: false, // 控制弹窗显示
      imageUrl: '',               // 存储图片URL

      cameraResult04:null, // PCB板锁紧螺丝（IGBT）相机拍照结果
      cameraResult05:null, // IGBT锁紧螺丝相机拍照结果
      cameraResult06:null, // PCB板锁紧螺丝（Hous）相机拍照结果
      cameraResult07:null, // 薄膜电容螺丝相机拍照结果
      cameraResult08:null, // 三相铜排锁紧螺丝相机拍照结果
      cameraResult09:null, // 连接器螺丝相机拍照结果
      cameraResult10:null, // 片外锁紧螺丝相机拍照结果
      cameraResult11:null, // 片外锁紧螺丝相机拍照结果
      cameraResult12:null, // 线束插座相机拍照结果

      // 表单参数
      form: {
        stationCode: "",
        partIdentifier: "",
        operateCode: "",
        typeNo: "",
        wpcId: "",
        operateDesc: "",
      },

      // 查询操作指引参数
      queryOperateParams: {
        pageNum: 1,
        pageSize: 50,
        nodeCode: null
      },
      //日期时间
      currentDate: '',
      currentTime: '',

      // ... 其他现有数据
      plcConnected: true,     // PLC连接状态
      deviceMode: false,       // 设备模式
      deviceOrigin: false,     // 设备原点
      deviceStatus: false,     // 设备状态

    };
  },

  created() {
    // 初始化WebSocket连接
    this.stationCode = this.getParameterByName('stationCode');
    console.log('获取到的stationCode:', this.stationCode); // 添加日志输出
    if (!this.stationCode) {
      console.error('stationCode为空或未传递'); // 添加错误日志
      alert('stationCode为空或未传递，请检查URL参数'); // 添加用户提示
      return;
    }
    this.getAllNodes(); // 获取所有检测节点数据
  },
  computed: {
    stationImage() {
      // 根据 stationCode 返回对应的图片路径
      if (this.stationCode === '7') {
        if(this.operateCode === 10||this.operateCode === 15||this.operateCode === 20){
          return require('@/assets/operate/default.png');
        }
        if(this.operateCode === 150){
          return require('@/assets/operate/OP07.7.png');
        }
        if(this.operateCode === 60||this.operateCode === 80||this.operateCode === 160||this.operateCode === 170){
          return require('@/assets/operate/OP07.2.png');
        }
        if(this.screwNumber === 1){
          return require('@/assets/operate/OP07.1.png');
        }
        if(this.screwNumber === 2){
          return require('@/assets/operate/OP07.3.png');
        }
        if(this.screwNumber === 3){
          return require('@/assets/operate/OP07.4.png');
        }
        if(this.screwNumber === 4){
          return require('@/assets/operate/OP07.5.png');
        }
        if(this.screwNumber === 5){
          return require('@/assets/operate/OP07.6.png');
        }
        return require('@/assets/operate/OP07.6.png');
      }
      if (this.stationCode === 'OP09') {
        if(this.operateCode === 30){
          return require('@/assets/operate/OP09.1.png');
        }
        if(this.operateCode === 10||this.operateCode === 15 ||this.operateCode === 20 || this.operateCode === 40){
          return require('@/assets/operate/OP09.2.png');
        }
        if(this.operateCode === 60||this.operateCode === 61||this.operateCode === 70){
          return require('@/assets/operate/OP09.3.png');
        }
        if(this.operateCode === 90){
          return require('@/assets/operate/OP09.4.png');
        }
        if(this.operateCode === 80||this.operateCode === 110||this.operateCode === 120||this.operateCode === 130){
          return require('@/assets/operate/OP09.5.png');
        }
        return require('@/assets/operate/OP09.4.png');
      }
      if (this.stationCode === 'OP11') {

        if(this.operateCode === 10||this.operateCode === 15){
          return require('@/assets/operate/OP11.1.png');
        }
        if(this.operateCode === 20){
          return require('@/assets/operate/OP11.2.png');
        }
        if(this.operateCode === 30||this.operateCode === 110||this.operateCode === 130){
          return require('@/assets/operate/OP11.3.png');
        }
        if(this.operateCode === 40){
          return require('@/assets/operate/OP11.4.png');
        }
        if(this.operateCode === 50||this.operateCode === 70||this.operateCode === 80||this.operateCode === 90){
          return require('@/assets/operate/OP11.5.png');
        }
        if(this.operateCode === 100||this.operateCode === 140){
          return require('@/assets/operate/OP11.6.png');
        }
        if(this.operateCode === 110||this.operateCode === 120||this.operateCode === 130){
          return require('@/assets/operate/OP11.6.png');
        }
      }
      if (this.stationCode === 'OP12') {

        if(this.operateCode === 10||this.operateCode === 15||this.operateCode === 20||this.operateCode === 30
          ||this.operateCode === 40||this.operateCode === 41||this.operateCode === 50)
        {
          return require('@/assets/operate/OP12.1.png');
        }
        if(this.operateCode === 60||this.operateCode === 70)
        {
          return require('@/assets/operate/OP12.3.png');
        }
        if(this.operateCode === 90||this.operateCode === 100||this.operateCode === 110||this.operateCode === 120)
        {
          return require('@/assets/operate/OP12.2.png');
        }
      }
      if (this.stationCode === 'OP14') {
        return require('@/assets/operate/OP14.2.png');
      }
      if (this.stationCode === 'OP15') {
        return require('@/assets/operate/OP15.1.png');
      }
      if (this.stationCode === 'OP16') {
        return require('@/assets/operate/OP16.2.png');
      }
      if (this.stationCode === 'OP17') {
        return require('@/assets/operate/OP17.1.png');
      }

      if (this.stationCode === 'OP19') {
        if(this.operateCode === 10||this.operateCode === 20||this.operateCode === 30||this.operateCode === 60){
          return require('@/assets/operate/OP19.1.png');
        }
        if(this.operateCode === 40||this.operateCode === 50||this.operateCode === 70||this.operateCode === 150||this.operateCode === 160){
          return require('@/assets/operate/OP19.2.png');
        }
        if(this.operateCode === 80||this.operateCode === 100||this.operateCode === 110){
          return require('@/assets/operate/OP19.3.png');
        }
        if(this.operateCode === 111||this.operateCode === 112||this.operateCode === 120
          ||this.operateCode === 130||this.operateCode === 140||this.operateCode === 141||this.operateCode === 180){
          return require('@/assets/operate/OP19.5.png');
        }
      }

      if (this.stationCode === 'OP21') {
        if(this.operateCode === 10||this.operateCode === 15||this.operateCode === 20){
          return require('@/assets/operate/OP21.1.png');
        }
        if(this.operateCode === 30){
          return require('@/assets/operate/OP21.2.png');
        }
        if(this.operateCode === 40||this.operateCode === 70||this.operateCode === 80||this.operateCode === 90||this.operateCode === 140){
          return require('@/assets/operate/OP21.3.png');
        }
        if(this.operateCode === 100||this.operateCode === 110||this.operateCode === 120){
          return require('@/assets/operate/OP21.4.png');
        }
      }
      // 默认返回某个通用图 or 空图
      return require('@/assets/operate/default.png');
    }
  },

  mounted() {
    // 组件挂载后开始更新时间
    this.updateDateTime();
    // 每秒更新一次时间
    setInterval(this.updateDateTime, 1000);
  },
  methods: {
    // 获取所有检测节点数据
    getAllNodes() {
      listAllNode().then(response => {
        this.nodes = response.rows;
        this.connectWebSocket(); // 在获取数据后连接WebSocket
      });
    },
    // 获取所有检测站数据
    getAllStations() {
      listAllStation().then(response => {
        this.stations = response.rows;
      });
    },
    // 判断是否显示卡片
    isCardVisible(stationCode) {
      return stationCode !== '27';
    },
    // 判断是否显示预拧紧卡片
    isPreVisible(stationCode) {
      return stationCode === '11';
    },
    // 判断是否显示卡片
    isCardVisibleOnly27(stationCode) {
      return stationCode === '27';
    },
    // 连接WebSocket
    connectWebSocket() {
      if (!this.stationCode) {
        alert("无效的stationCode");
        return;
      }

      // 查找匹配的节点
      const matchedNode = this.nodes.find(node => node.nodeCode === this.stationCode);
      if (!matchedNode || !matchedNode.ipcIp) {
        console.error(`没有找到与stationCode ${this.stationCode}匹配的节点或IP地址未配置`);
        alert(`没有找到与stationCode ${this.stationCode}匹配的节点或IP地址未配置`);
        return;
      }

      // 拼接完整的WebSocket URL
      const wsuri = `${this.url}${matchedNode.ipcIp}:8088/websocket/${this.stationCode}`;
      // 创建WebSocket连接
      this.ws = new WebSocket(wsuri);

      const self = this;
      this.ws.onopen = function (event) {
        console.log("连接成功", wsuri);
      };

      this.ws.onmessage = function (event) {
        const [dataType, jsonData] = event.data.split('|');
        const data = JSON.parse(jsonData);
        if (dataType === '2' && self.stationCode !== "27") {
          console.log("处理数据2:",Object.keys(data).length);
          let loop = 5;
          if (Number(self.stationCode) === 11||Number(self.stationCode)==21||Number(self.stationCode)==23) {
            loop = 4;
          }
          if (Number(self.stationCode) === 9||Number(self.stationCode) === 12) {
            loop = 6;
          }
          if (Number(self.stationCode) === 19) {
            loop = 7;
          }
          // 解析预拧紧数据
          const preData = [];
          for (let i = 1; i <= loop; i++) {
            preData.push({
              screwNumber: i,
              programNumber: data[`preProgNo0${i}`], // 示例程序号取值
              resultState: data[`preResultState0${i}`],
              torqueMin: data[`preTorqueLowLimit0${i}`],
              torqueActual: data[`preTorqueActual0${i}`],
              torqueMax: data[`preTorqueUpLimit0${i}`],
              angleMin: data[`preAngleLowLimit0${i}`],
              angleActual: data[`preAngleActual0${i}`],
              angleMax: data[`preAngleUpLimit0${i}`]
            });
          }
          self.preTighteningData = preData;

          // 解析终拧紧数据
          const finalData = [];
          for (let i = 1; i <= loop; i++) {
            finalData.push({
              screwNumber: i,
              programNumber: data[`finalProgNo0${i}`], // 示例程序号取值
              resultState: data[`finalResultState0${i}`],
              torqueMin: data[`finalTorqueLowLimit0${i}`],
              torqueActual: data[`finalTorqueActual0${i}`],
              torqueMax: data[`finalTorqueUpLimit0${i}`],
              angleMin: data[`finalAngleLowLimit0${i}`],
              angleActual: data[`finalAngleActual0${i}`],
              angleMax: data[`finalAngleUpLimit0${i}`]
            });
          }
          self.finalTighteningData = finalData;
          self.cameraResult01 = data.cameraResult01;
          self.cameraResult02 = data.cameraResult02;
          self.cameraResult03 = data.cameraResult03;
          console.log("相机拍照结果:", self.cameraResult01, self.cameraResult02, self.cameraResult03);
          self.screwNumber = data.screwNumber; // 更新螺丝号

          // 生成并检查图片URL
          self.generateImageUrl(data);
        }
        if (dataType === '2' && self.stationCode === "27") {
          self.cameraResult01 = data.cameraResult01;
          self.cameraResult02 = data.cameraResult02;
          self.cameraResult03 = data.cameraResult03;
          self.cameraResult04 = data.cameraResult04; // PCB板锁紧螺丝（IGBT）相机拍照结果
          self.cameraResult05 = data.cameraResult05; // IGBT锁紧螺丝相机拍照结果
          self.cameraResult06 = data.cameraResult06; // PCB板锁紧螺
          self.cameraResult07 = data.cameraResult07; // 薄膜电容螺丝相机拍照结果
          self.cameraResult08 = data.cameraResult08; // 三相铜排锁紧螺丝相机拍照结果
          self.cameraResult09 = data.cameraResult09; // 连接器螺丝相机拍照结果
          self.cameraResult10 = data.cameraResult10; // 片外锁紧螺丝相机拍照结果
          self.cameraResult11 = data.cameraResult11; // 线束插座相机拍照结果
          self.cameraResult12 = data.cameraResult12; // PCB板相机拍照结果

          // 生成并检查图片URL
          self.generateImageUrl(data);
        }
        if (dataType === '1') {
          self.handleTypeOneData(data);
        }
      };

      this.ws.onclose = function (event) {
        console.log("连接关闭");
      };

      this.ws.onerror = function (event) {
        console.error("WebSocket错误:", event);
        alert("WebSocket连接发生错误");
      };
    },

    exit() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },

    getParameterByName(name) {
      name = name.replace(/[\]]/g, '\\$&');
      const url = window.location.href;
      const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
      const results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, ' '));
    },

    handleTypeOneData(data) {
      // 这里可以操作接收到的数据，例如更新到组件的 data 或展示提示信息
      // 需要在 data() 中定义该变量
      this.operateDesc = data.operateDesc;
      this.operateCode = data.operateCode;
      this.partIdentifier = data.partIdentifier;
      this.flag = data.flag;
      this.form.typeNo = data.typeNo;
      this.form.stationCode = data.stationCode;
      this.form.partIdentifier = data.partIdentifier;
      this.form.wpcId = data.wpcId;
      this.ordList = data.ordList || [];
      this.operationMode = data.operationMode;
      this.inHomePos = data.inHomePos;
      this.alarm = data.alarm;
    },
    generateImageUrl(data) {
      const matchedNode = this.nodes.find(node => node.nodeCode === this.stationCode);
      if (!matchedNode || !matchedNode.ipcIp) {
        console.error('无法找到匹配的节点或IP地址');
        return;
      }

      // 获取当前时间戳并格式化为 YYYYMM/DD
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
      const day = String(now.getDate()).padStart(2, '0');

      // 构建基础URL
      let baseUrl = `http://${matchedNode.ipcIp}/ngimage/${year}${month}/${year}${month}${day}/`;
      // 根据 partIdentifier 拼接图片名称
      const imageName = `${this.partIdentifier}.jpg`;
      this.imageUrl = baseUrl + imageName;
      // 如果有任何 cameraResult 值为 '2'，则显示图片弹窗
      const hasNg = ['cameraResult01', 'cameraResult02', 'cameraResult03', 'cameraResult04',
        'cameraResult05', 'cameraResult06', 'cameraResult07', 'cameraResult08',
        'cameraResult09', 'cameraResult10', 'cameraResult11', 'cameraResult12'].some(key => data[key] === 2);
      if (hasNg) {
        this.imageDialogVisible = true;
      } else {
        this.imageDialogVisible = false;
        this.imageUrl = '';
      }
    },

    getCameraTitle(cameraIndex) {
      let title = '';
      switch (this.stationCode) {
        case '7':
          if (cameraIndex === 1) title = '产品螺丝加工拍照';
          else if (cameraIndex === 2) title = '产品整体加工拍照';
          break;
        case '9':
        case '12':
        case '21':
        case '23':
          if (cameraIndex === 1) title = '产品整体加工拍照';
          break;
        case '11':
          if (cameraIndex === 1) title = '产品密封圈加工拍照';
          else if (cameraIndex === 2) title = '产品整体加工拍照';
          break;
        case '19':
          if (cameraIndex === 1) title = '产品铜柱加工拍照';
          else if (cameraIndex === 2) title = '产品铜排加工拍照';
          else if (cameraIndex === 3) title = '产品整体加工拍照';
          break;
        default:
          title = `相机${cameraIndex}`;
      }
      return title;
    },

    showCamera2() {
      return [ '7', '11', '19' ].includes(this.stationCode);
    },

    showCamera3() {
      return this.stationCode === '19';
    },

    updateDateTime() {
      const now = new Date();


      // 手动构建"YYYY年M月D日"格式
      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份从0开始，需要+1
      const day = now.getDate();
      this.currentDate = `${year}年${month}月${day}日`;

      // 格式化时间 (HH:MM:SS)
      this.currentTime = now.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    }
  },
};
</script>
<style scoped>
.status-ok {
  color: green;
  font-weight: bold;
}

.status-ng {
  color: red;
  font-weight: bold;
}
.bg-success {
  background-color: #a8e6a3; /* 加深后的浅绿色 */
}

.bg-danger {
  background-color: #f09898; /* 加深后的浅红色 */
}

.row-bordered {
  margin-bottom: 0px;
  border: 1px solid #ebeef5;
  padding: 4px;
}
.info-row {
  height: 36px;
  line-height: 36px;
}

.date {
  font-size: 30px;
  text-align: center;
  color: #000000;
  font-weight: bold;
  margin-bottom: 10px;
}

.time {
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: #ff5500;
  margin-bottom: 10px;
}
.status-item-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-text {
  margin-right: 12px;
  white-space: nowrap;
}

/* 状态指示灯样式 */
.status-light-green {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #00ff00;
  box-shadow: 0 0 5px #00ff00;
}

.status-light-red {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ff0000;
  box-shadow: 0 0 5px #ff0000;
}

.status-light-yellow {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ffdd00;
  box-shadow: 0 0 5px #ffdd00;
}
.status-light-blue {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #0000ff;
  box-shadow: 0 0 5px #0000ff;
}
.mode-text {
  margin-left: 8px;
  font-size: 16px;
}
</style>
  
